<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>快递管理系统</title>
    <meta name="Copyright" content="Douco Design."/>
    <link href="css/public.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/global.js"></script>
</head>
<body>
<div id="dcWrap">
    <div id="dcHead">
        <div id="head">
            <div class="logo"><a href="index.html"><img width="100px"
                                                        height="25px" src="images/dclogo.gif" alt="logo"></a></div>
            <div class="nav">
                <ul class="navRight">
                    <li class="M noLeft"><a href="JavaScript:void(0);">您好，admin</a>
                        <div class="drop mUser">
                            <a href="password.html">修改密码</a>
                        </div>
                    </li>
                    <li class="noRight"><a href="login.php?rec=logout">退出</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- dcHead 结束 -->
    <div id="dcLeft">
        <div id="menu">
            <ul class="top">
                <li><a href="index.html"><i class="home"></i><em>管理首页</em></a></li>
            </ul>
            <ul>
                <li><a href="password.html"><i
                        class="system"></i><em>修改密码</em></a></li>
                <li><a href="list.html"><i class="nav"></i><em>快递管理</em></a></li>
            </ul>
        </div>
    </div>
    <div id="dcMain">
        <!-- 当前位置 -->
        <div id="urHere">快递管理系统<b>></b><strong>修改密码</strong></div>
        <div id="manager" class="mainBox"
             style="height:auto!important;height:550px;min-height:550px;">
            <h3><a href="index.html" class="actionBtn">返回首页</a>修改密码</h3>
            <form action="https://www.baidu.com" method="post">
                <table width="100%" border="0" cellpadding="8" cellspacing="0"
                       class="tableBasic">
                    <tr>
                        <td width="100" align="right">原始密码</td>
                        <td>
                            <input id="oldPwdInput" type="password" name="user_name" size="40"
                                   class="inpMain"/>
                            &nbsp; &nbsp; <span id="oldPwdMsg"></span>
                        </td>
                    </tr>
                    <tr>
                        <td width="100" align="right">新密码</td>
                        <td>
                            <input id="newPwdInput" type="password" size="40" class="inpMain"/>
                            &nbsp; &nbsp; <span id="newPwdMsg"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">确认密码</td>
                        <td>
                            <input id="rePwdInput" type="password" name="password" size="40"
                                   class="inpMain"/>
                            &nbsp; &nbsp; <span id="rePwdMsg"></span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input id="submitBtn" type="submit" name="submit" class="btn" value="提交"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="clear"></div>
    <div id="dcFooter">
        <div id="footer">
            <div class="line"></div>
            <ul>
                版权所有 © 2024-2025 尚硅谷教育，并保留所有权利。
            </ul>
        </div>
    </div><!-- dcFooter 结束 -->
    <div class="clear"></div>
</div>
</body>
<script>
    // ======================提示信息汇总======================
    const MSG_OLD_PWD_SUCCESS = "<span style='color:blue;font-weight: bolder;'>原始密码格式正确</span>";
    const MSG_OLD_PWD_FAILED = "<span style='color:red;font-weight: bolder;'>原始密码格式不正确</span>";
    const MSG_NEW_PWD_SUCCESS = "<span style='color:blue;font-weight: bolder;'>新密码格式正确</span>";
    const MSG_NEW_PWD_FAILED = "<span style='color:red;font-weight: bolder;'>新密码格式不正确</span>";
    const MSG_RE_PWD_SUCCESS = "<span style='color:blue;font-weight: bolder;'>确认密码格式正确</span>";
    const MSG_RE_PWD_FAILED = "<span style='color:red;font-weight: bolder;'>确认密码格式不正确</span>";
    const MSG_PWD_NOT_SAME = "<span style='color:red;font-weight: bolder;'>两次输入的密码不一致</span>";

    // ======================验证密码的正则表达式======================
    let pwdReg = /^[A-Za-z0-9_]{6,12}$/;

    // ======================获取相关控件对应的元素节点对象======================
    let oldPwdInputEle = document.getElementById("oldPwdInput");
    let oldPwdMsgEle = document.getElementById("oldPwdMsg");
    let newPwdInputEle = document.getElementById("newPwdInput");
    let newPwdMsgEle = document.getElementById("newPwdMsg");
    let rePwdInputEle = document.getElementById("rePwdInput");
    let rePwdMsgEle = document.getElementById("rePwdMsg");
    let submitBtnEle = document.getElementById("submitBtn");

    // ======================具体功能实现======================
    // 1、验证原始密码
    oldPwdInputEle.onchange = function () {
        oldPwdMsgEle.innerHTML = pwdReg.test(this.value) ? MSG_OLD_PWD_SUCCESS : MSG_OLD_PWD_FAILED;
    }

    // 2、新密码验证
    newPwdInputEle.onchange = function () {
        newPwdMsgEle.innerHTML = pwdReg.test(this.value) ? MSG_NEW_PWD_SUCCESS : MSG_NEW_PWD_FAILED;
    }

    // 3、确认密码验证
    rePwdInputEle.onchange = function () {
        rePwdMsgEle.innerHTML = pwdReg.test(this.value) ? MSG_RE_PWD_SUCCESS : MSG_RE_PWD_FAILED;
        // 4、验证两次输入的密码是否一致
        if (this.value !== newPwdInputEle.value) {
            rePwdMsgEle.innerHTML = MSG_PWD_NOT_SAME;
        }
    }

    // 5、提交表单时验证
    submitBtnEle.onclick = function () {
        // [1]验证旧密码
        let oldPwdCheckResult = pwdReg.test(oldPwdInputEle.value);

        // [2]验证新密码
        let newPwdCheckResult = pwdReg.test(newPwdInputEle.value);

        // [3]验证确认密码
        let rePwdCheckResult = pwdReg.test(rePwdInputEle.value) && newPwdInputEle.value === rePwdInputEle.value;

        // [4]汇总校验结果
        if (!oldPwdCheckResult || !newPwdCheckResult || !rePwdCheckResult) {
            alert("表单验证不通过");
            event.preventDefault();
        }
    }
</script>
</html>